跳到主要内容

间距

主要用于控制组件之间的间隔。

何时使用​

  • 避免组件紧贴在一起，拉开统一的空间。
  • 适合行内元素的水平间距。
  • 可以设置各种水平对齐方式。

一、属性​

1. 主要属性​

（1）外观 - 垂直对齐​

垂直对齐：提供四种对齐方式，默认为上。

image-20250606092302109

对齐方式 - 上：即间距内组件在 y 轴上靠顶部排列。

image-20240902135534513

垂直对齐 - 中：即间距内组件在 y 轴上居中排列。

image-20240902135558177

垂直对齐 - 下：即间距内组件在 y 轴上靠底部排列。

image-20240902135633193

垂直对齐 - 基线：即间距内组件在 y 轴上对齐到基线。间距内所有组件的文本底部（基线）将对齐，即使组件的大小或字体不同，它们的文本底部也会在同一水平线上，从而保持视觉上的整齐。

image-20240902140036313

（2）外观 - 排列方式​

排列方式：提供两种排列方式，默认水平。

image-20240902140549480

排列方式 - 水平：即间距内组件从左到右排列。

image-20240902140654126

排列方式 - 垂直：即间距内组件从上到下排列。

image-20240902140906624

（3）外观 - 间距大小​

间距大小：提供选择模式和手动输入值模式，默认为选择模式。

image-20240902141424945

选择模式：提供小、中和大三种间距供选择，默认是小。三种间距分别如下：

image-20240902142458231

输入模式：手动设置组件之间的间距，以 px 为单位。如下设置间距为 80px。

image-20240904160529890
image-20240904160548851

（4）外观 - 分隔符​

分隔符：默认关闭。开启后会在间距内的每个组件之间添加竖直的分割线。

image-20240902142524799
image-20240902142858014

（5）外观 - 自动换行​

自动换行：默认关闭。开启后当间距内多个组件总宽度超出间距的宽度后，自动换行。

image-20240902143130646
image-20240902143110223

（6）状态 - 隐藏​

隐藏：默认关闭。开启后组件仍存在，但在页面上不可见。

image-20240902143320622

二、样式​

无特殊样式配置，详见 通用样式。

三、常见使用场景​

1. 表单项​

在表单中，确保输入框、标签等元素之间有一致的间距。

如下，在表单中放置了一个间距组件，其中放置了两个表单项。此做法能够保证两个表单项在同一水平线上且中间有间隔。常见于网站的头部登录表单。

image-20240823091940812

2. 容器类组件​

在卡片或列表等容器类组件中，确保每个项之间有适当的间隔。

如下，卡片中放置了多个间距组件，在其中放入标题和文本，并设置不同的对齐方向。

image-20240823091826418

3. 按钮组​

在一组按钮之间添加一致的间距。

image-20240823091858292